<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部表单 -->

        <el-row class="header">
          <el-col :span="12"><div class="grid-content bg-introduce">说明：目前支持学科和关键词条件筛选</div></el-col>
          <el-col :span="12">
            <div class="grid-content bt-addbox">
              <el-button type="success" icon="el-icon-edit" class="bt-add" size="small">新增试题</el-button>
            </div>
          </el-col>
        </el-row>
        <el-form ref="ruleForm" :model="form" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科" prop="subject">
                <el-select v-model="form.subject" placeholder="请选择" @change="getSecond">
                  <el-option v-for="item in simpleSubjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" prop="secondMenu">
                <el-select v-model="form.secondMenu" placeholder="请选择">
                  <el-option v-for="item in secondList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="label">
                <el-select v-model="form.label" placeholder="请选择">
                  <el-option v-for="item in labelList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyWord">
                <el-input v-model="form.keyWord" placeholder="根据题干搜索" class="input"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择">
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>
                  <el-option label="简单" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option label="简单" value="1"></el-option>
                  <el-option label="一般" value="2"></el-option>
                  <el-option label="困难" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option label="o2o" value="shanghai"></el-option>
                  <el-option label="外包服务" value="beijing"></el-option>
                  <el-option label="企业服务" value="beijing"></el-option>
                  <el-option label="互联网金融" value="beijing"></el-option>
                  <el-option label="企业咨询" value="beijing"></el-option>
                  <el-option label="互联网" value="beijing"></el-option>
                  <el-option label="电子商务" value="beijing"></el-option>
                  <el-option label="其他" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人" prop="persion">
                <el-select v-model="form.persion" placeholder="请选择">
                  <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input class="input" v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="abbreviation">
                <el-input v-model="form.abbreviation" class="input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市" prop="provience">
                <el-select v-model="form.provience" placeholder="请选择" class="city left" @change="getCitysList">
                  <el-option v-for="item in provienceList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <el-select v-model="form.city" placeholder="请选择" class="city">
                  <el-option v-for="item in cityList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item >
                <el-button class="btn" @click="resetList">清除</el-button>
                <el-button class="btn" type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 提示框 -->
        <el-alert
          title="数据一共28条"
          type="info"
          show-icon
          :closable="false"
          class="alert">
        </el-alert>
        <!-- 表格 -->
        <!-- <el-table
          :data="tableData"
          style="width: 100%">
            <el-table-column
              prop="name"
              label="试题编号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="name"
              label="学科"
              width="80">
            </el-table-column>
            <el-table-column
              prop="name"
              label="目录"
              width="80">
            </el-table-column>
            <el-table-column
              prop="name"
              label="题型"
              width="80">
            </el-table-column>
            <el-table-column
              prop="name"
              label="题干"
              width="280">
            </el-table-column>
            <el-table-column
              prop="name"
              label="录入时间"
              width="170">
            </el-table-column>
            <el-table-column
              prop="name"
              label="难度"
              width="80">
            </el-table-column>
            <el-table-column
              prop="name"
              label="录入人"
              width="80">
            </el-table-column>
            <el-table-column label="操作" width="120">
              <el-button type="primary" icon="el-icon-view" circle plain></el-button>
              <el-button type="success" icon="el-icon-edit" circle plain></el-button>
              <el-button type="danger" icon="el-icon-delete" circle plain></el-button>
              <el-button type="warning" icon="el-icon-check" circle plain></el-button>
            </el-table-column>
        </el-table> -->
        <!-- 分页 -->
        <!-- <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          class="pagination"
          >
        </el-pagination> -->
      </el-card>
    </div>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { simple as erji } from '@/api/hmmm/directorys.js'
import { simple as userSimple } from '@/api/base/users.js'
import { simple as label } from '@/api/hmmm/tags.js'
import { provinces as getProvinces, citys as getCitys } from '@/api/hmmm/citys.js'
export default {
  data () {
    return {
      form: {
        subject: '',
        secondMenu: '',
        label: '',
        keyWord: '',
        type: '',
        difficulty: '',
        direction: '',
        persion: '',
        remarks: '',
        abbreviation: '',
        provience: '',
        city: ''

      },
      simpleSubjectList: [],
      secondList: [],
      labelList: [],
      userList: [],
      provienceList: [],
      cityList: [],
      subjectList: {
        page: 1,
        pagesize: 5
      },
      data: {
        subjectID: ''
      }
    }
  },
  created () {
    this.getSubjectList()
    this.getUserList()
    this.getProvincesList()
  },
  methods: {
    // 获取简单的学科列表
    async getSubjectList () {
      const { data } = await simple()
      console.log(data, 'subjects')
      this.simpleSubjectList = data
    },
    // 二级列表
    async getSecond () {
      // 获取二级列表
      this.data.subjectID = this.form.subject
      console.log(this.form.subject, '111')
      const res = await erji(this.data)
      console.log(res, '二级目录')
      this.secondList = res.data
      // 获取标签列表
      const { data: data1 } = await label(this.data)
      console.log(data1, '标签')
      this.labelList = data1
    },
    // 获取用户列表
    async getUserList () {
      const { data: data2 } = await userSimple()
      console.log(data2, '录入人')
      this.userList = data2
    },
    // 获取城市列表
    async getProvincesList () {
      const res = await getProvinces()
      this.provienceList = res
      console.log(res, '区')
    },
    // 获取地区列表
    async getCitysList () {
      const i = this.form.provience
      const res = await getCitys(i)
      this.cityList = res
      console.log(res, '县')
    },
    // 重置
    resetList () {
      this.$refs.ruleForm.resetFields()
      console.log(1)
      // this.form = {
      //   subject: '',
      //   secondMenu: '',
      //   label: '',
      //   keyWord: '',
      //   type: '',
      //   difficulty: '',
      //   direction: '',
      //   persion: '',
      //   remarks: '',
      //   abbreviation: '',
      //   provience: '',
      //   city: ''

      // }
    }
  }
}
</script>

<style scoped>
.pagination{
  float: right;
}
.bg-introduce{
  font-size: 12px;
  color: pink;
}
.bt-addbox{
  display: flex;
  align-items:center;
}
.bt-add{
  margin-left: auto;
}
.header{
  margin-bottom: 14px !important;
}
.alert{
  margin-bottom: 14px !important;
}
.bt-end{
  padding-left: 130px;
}
</style>
<style scoped>
.input{
  width: 96%;
}
.city{
  width: 46%;
}
  .left{
    margin-right: 10px !important;
  }
</style>
<style scoped>
::v-deep
  .el-pagination__jump {
    margin-left: 0px;
    font-weight: 400;
    color: #606266;

}

</style>
